<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>个人信息</title>
    <link rel="shortcut icon" th:href="@{/image/favicon.ico}" type="image/x-icon"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/materialdesignicons.min.css}" rel="stylesheet">
    <link th:href="@{/css/style.min.css}" rel="stylesheet">
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <div th:replace="comm/WL2022-CommUserAdmin :: #commLeftNavigation"></div>

        <div th:fragment="visit" id="visit">
            <div th:replace="comm/WL2022-CommUserAdmin :: #commHeader"></div>
            <!--页面主要内容-->
            <main class="lyear-layout-content">

                <div class="container-fluid">

                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-body">
                                    <form class="site-form">
                                        <div class="edit-avatar">
                                            <img  th:src="@{/image/userImage/{imageName}(imageName=${session.image})}" th:alt="${session.nickName}" class="img-avatar"
                                                 id="userImage"><div class="avatar-divider"></div>
                                            <div class="edit-avatar-content">
                                                <input type="file" id="uploadImg" value="修改">
                                                <br>
                                                <p class="m-0"> 选择一张你喜欢的图片，裁剪后会自动生成264x264大小，上传图片大小不能超过2M。</p>
                                            </div>
                                        </div>
                                    <hr>
                                    <div class="form-group">
                                        <label for="username">用户账号</label>
                                        <input type="text" class="form-control" name="username" id="username"
                                               th:value="${session.userName}" disabled="disabled"/>
                                    </div>

                                        <div class="form-group">
                                            <label for="nickname">昵称（6个字以内）</label>
                                            <input type="text" class="form-control" name="nickname" id="nickname"
                                                   placeholder="输入您的昵称" th:value="${session.nickName}" maxlength="6">
                                        </div>
                                        <div class="form-group">
                                            <label for="email">邮箱</label>
                                            <input type="email" class="form-control" name="email" id="email"
                                                   aria-describedby="emailHelp" placeholder="请输入正确的邮箱地址"
                                                   th:value="${session.email}">
                                            <small id="emailHelp"
                                                   class="form-text text-muted">请保证您填写的邮箱地址是正确的。</small>
                                        </div>
                                        <button class="btn btn-primary" lay-submit
                                                lay-filter="submitMy">>保存
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
            <!--End 页面主要内容-->
        </div>
    </div>
</div>
</body>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery-3.6.0.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/perfect-scrollbar.min.js}"></script>
<script type="text/javascript" th:src="@{/js/main.min.js}"></script>
<script type="text/javascript">
    document.querySelector('input').addEventListener('change',function(e){
        // 获取选择的文件
        const fileList = e.target.files
        // 创建FileReader实例对象
        const reader = new FileReader()
        // 调用readAsDataURL函数读取文件内容
        reader.readAsDataURL(fileList[0])
        // 监听FileReader创建的实例对象的onload事件
        reader.addEventListener('load', () => {
            // 通过e.target.result获取读取到的结果，值是base64格式的字符串
            console.log(reader.result)
            $("#userImage").attr("src", reader.result);
            // document.querySelector('userImage').src = reader.result
        })
    })
</script>
<script type="text/javascript">
    <!--  信息保存  异步提交-->
    layui.use(['jquery', 'form',], function () {
        const layer = layui.layer;
        const form = layui.form;
        const $ = layui.jquery;

        form.on('submit(submitMy)', function () {
            //判空
            let nickName = $("#nickname").val().replace(/\s*/g, "");
            let email = $("#email").val().replace(/\s*/g, "");
            let file = $("#uploadImg").get(0).files[0];
            const formData = new FormData(); // 要提交的内容封装进formData
            let url="[[@{/user/save}]]";
            formData.append("nickName", nickName);
            formData.append("email", email);
            if(file===undefined){
                //不存图片
                url="[[@{/user/save2}]]"
            }else{
                if (!/image\/\w+/.test(file.type)) { //判断文件的是不是图片
                    layer.msg('选择的图片格式不对,请重新上传...！', {icon: 5});
                    return false;
                }
                formData.append("image", file);
            }
            if (nickName === '' || nickName === null) {
                layer.msg('昵称不能为空！', {icon: 5});
                return false;
            }
            if ($("#nickname").val() === '[[${session.nickName}]]' && $("#email").val() === '[[${session.email}]]' && file===undefined) {
                layer.msg('请修改之后再点击保存！', {icon: 5});
                return false;
            }
            $.ajax({
                url: url,
                type: "post",
                data: formData,
                cache: false,//上传文件无需缓存
                processData: false,//用于对data参数进行序列化处理 这里必须false
                contentType: false, //必须*/
                success: function (data) {
                    $("#visit").html(data);
                },
                complete: function () {
                    layer.open({
                        title: '保存成功',
                        content: '保存成功',
                        icon: 6,
                    });
                },
                error: function () {
                    layer.open({
                        title: '程序出错',
                        content: '程序故障！麻烦联系一下管理员',
                        icon: 5
                    });
                }
            })
            return false;
        })
    })
</script>
</html>
